<template>
  <div id="particles-container"></div>
  <el-config-provider :locale="locale" :message="config">
    <router-view />
  </el-config-provider>
</template>

<script setup>
import { reactive, onMounted, onBeforeUnmount } from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { initParticles, setParticlesHeight } from './utils/particles'; // 引入粒子效果函数

// 配置语言
const locale = zhCn;
const config = reactive({
  max: 1,
});

onMounted(() => {
  // 初始化粒子效果
  initParticles();

  // 设置初始高度
  setParticlesHeight();

  // 监听窗口调整事件，重新设置容器高度和初始化粒子效果
  window.addEventListener('resize', () => {
    setParticlesHeight();
    initParticles(); // 重新初始化粒子效果
  });
});

// 在组件销毁时，移除事件监听器
onBeforeUnmount(() => {
  window.removeEventListener('resize', setParticlesHeight);
});
</script>

<style scoped>
#particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
</style>
